<template>
	<view>
		<view class="box1">
			<view class="left">
				<image :src="avatar" alt="Avatar" style="width: 30vw;height: 15vh;" mode=""></image>

			</view>
			<view class="right">
				<p>昵称: <span>123</span></p>
				<p>电话: <span>123</span></p>
				<p>邮箱: <span>123</span></p>

				<u-button @click="chooseImage" style="float: left;margin-right: 4vw;  width:25vw;margin-left: 0vw;" text="更换头像"
					color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
				<u-button @click="saveAvatar" style="float: left; width:25vw;margin-left: 0vw;" text="保存头像"
					color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
			</view>
		</view>
		<view class="box2">
			<u-button @click="js" style="margin-bottom: 2vh;" text="编辑"
				color="linear-gradient(to right, rgb(166, 183, 16), rgb(213, 51, 186))"></u-button>
			<u-button text="退出" color="linear-gradient(to right, rgb(166, 23, 16), rgb(23, 81, 196))"></u-button>
		</view>
		<tabs></tabs>
	</view>
</template>

<script>
	import tabs from '@/components/tab.vue'
	export default {
		data() {
			return {
				avatar: '../../static/tx.jpg' // 用户头像路径，初始为空
			}
		},
		methods: {
			js() {
				uni.navigateTo({
					url: '/pages/settle/settle'
				})

			},
			chooseImage() {
				uni.chooseImage({
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0]
						this.avatar = tempFilePaths // 更新用户头像路径

					}
				})
			},
			saveAvatar() {
				uni.setStorageSync('new_avatar', this.avatar) // 将新头像路径保存到本地缓存
				uni.showToast({
					title: '头像保存成功',
					icon: 'success'
				})
			}

		},
		components: {
			tabs
		}
	}
</script>

<style>
	.box1 {
		width: 100%;
		height: 20vh;
	}

	.left {
		width: 40%;
		height: 100%;
		float: left;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.right {
		width: 60%;
		height: 100%;
		float: left;
		margin-top: 1vh;

	}

	p {
		line-height: 4vh;

	}

	.box2 {
		width: 100%;
		height: 12vh;
		margin-top: 51vh;
	}
</style>